<template>
	<div class="myheader">
		<div class="title" v-if="type_title == 'noright'">
			<span @click="back"></span>
			<span>{{title}}</span>
			<span></span>
		</div>
		<div class="title" v-else-if="type_title == 'index'">
			<span @click="backindex"></span>
			<span>{{title}}</span>
			<span @click="options($event)">{{lease}}<div v-bind:class="acive"></div></span>
			<div class="option" v-if="show">
				<ul>
					<li @click="leaseMethod($event)" v-for="(leases,index) in leasearr">{{leases}}</li>
				</ul>
			</div>
		</div>
		<div class="title" v-else-if="type_title == 'yright'">
			<span @click="back"></span>
			<span>{{title}}</span>
			<span @click="options($event)">{{lease}}<div v-bind:class="acive"></div></span>
			<div class="option" v-if="show">
				<ul>
					<li @click="leaseMethod($event)" v-for="(leases,index) in leasearr">{{leases}}</li>
				</ul>
			</div>
		</div>
		<!--创建订阅条件-->
		<div class="title" v-else-if="type_title == 'norights'">
			<span @click="backSub"></span>
			<span>{{title}}</span>
			<span></span>
		</div>
		<div class="title" v-else>
			<span @click="back"></span>
			<span>{{title}}</span>
			<span>
				<router-link to="/subscribe_term">
					<div class="subscribe"></div>
					 创建
				</router-link>
			</span>
		</div>
	</div>
</template>

<script>
	export default {
		name: "myheader",
		data() {
			return {
				show: false,
				acive:'active',
				lease:"写字楼出租",
				leasearr:["写字楼出租","写字楼出售"]
			}
		},
		props: ["title", "type_title"],
		methods: {
			backindex(){
				this.$router.push('/');
			},
			back: function() {
				this.$router.go(-1);
			},
			options(e) {
				this.show = !this.show;
				if (this.show) {
					this.acive = 'active1';
				} else if(!this.show) {
					this.acive = 'active';
				}
			},
			leaseMethod(e){
				this.lease=e.toElement.innerHTML
				this.show = !this.show;
					if (this.show) {
					this.acive = 'active1';
				} else if(!this.show) {
					this.acive = 'active';
				}
			},
			backSub(){
				this.$router.go(-1);
				//得到用户id
				var userId = localStorage.getItem('userId');
				//得到所有信息保存数据库
				var subBus = localStorage.getItem('subBus');
				var subAdd = localStorage.getItem('subAdd');
				var svval1 = localStorage.getItem('svval1');
				var svval2 = localStorage.getItem('svval2');
				var money1 = localStorage.getItem('money1');
				var money2 = localStorage.getItem('money2');
				var svval = svval1+"-"+svval2;
				var money = money1+"-"+money2;
				var data ={
					userId:userId,
					subBus:subBus,
					subAdd:subAdd,
					svval:svval,
					money:money
				}
				var _this = this;
				_this.axios.post(_this.ajaxUrls+'/api/User/addSub',_this.qs.stringify(data)).then(function(res){
					localStorage.removeItem("subBus");
					localStorage.removeItem("subAdd");
					localStorage.removeItem("svval1");
					localStorage.removeItem("svval2");
					localStorage.removeItem("money1");
					localStorage.removeItem("money2");
				}).catch(function(err){
					console.log(err);
				})
			}
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.myheader {
		width: 100%;
		height: 0.7rem;
		background: white;
	}
	
	.myheader .title {
		width: 100%;
		height: 100%;
		padding: 0 0.3rem;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.title {
		position: relative;
	}
	
	.title span:first-of-type {
		width: 14px;
		height: 24px;
		background: url(../../../static/image/icon_user.png) no-repeat;
		background-position: -232px -11px;
	}
	
	.title span:nth-of-type(2) {
		font-size: 0.3rem;
		color: #333333;
	}
	
	.title span:last-of-type {
		font-size: 0.3rem;
		color: #333333;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.title span:last-of-type .active {
		width: 24px;
		height: 14px;
		background: url(../../../static/image/icon_user.png) no-repeat;
		background-position: -467px -17px;
	}
	
	.title span:last-of-type .active1 {
		width: 24px;
		height: 14px;
		background: url(../../../static/image/icon_user.png) no-repeat;
		background-position: -430px -17px;
	}
	
	.option {
		width: 2.5rem;
		height: auto;
		position: absolute;
		top: 0.7rem;
		right: 0;
		border: 1px solid #F0F0F0;
		box-sizing: border-box;
		background: white;
	}
	
	.option ul {
		width: 100%;
		height: auto;
	}
	
	.option li {
		width: 100%;
		height: 0.7rem;
		text-align: center;
		line-height: 0.7rem;
		color: #999999;
		font-size: 0.3rem;
	}
	
	.option li:first-of-type {
		border-bottom: 1px solid #F0F0F0;
	}
	
	.subscribe {
		width: 22px;
		height: 22px;
		background: url(../../../static/image/icon_user.png) no-repeat;
		background-position: -361px -10px;
	}
	
	.title span:last-of-type a {
		display: inline-block;
		font-size: 0.3rem;
		color: #333333;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>